import { h, Component } from 'preact';
import { connect } from 'preact-redux';
import * as cookerAction from '~/action/user';
import { bindActionCreators } from 'redux';
import classNames from 'classnames';
import s from './Create.scss';
import DockBar from '~/components/DockBar';
import Select from '~/components/Select';
import Modal from '~/components/Modal';
import Loading from '~/components/Loading';
import validate, { VName, VPhone, VRequire } from '~/utils/validate';
import history from '~/core/history';
import face from './face.jpg';
import { creatCooks } from '~/api';

class Create extends Component {

	constructor(props) {
		super(props);
		this.state = {
			showError: false,
			message: null,

			headimgurl: this.props.user.headimgurl || null,
			name: this.props.user.name || null,
			phone: this.props.user.phone || null,
			sex: this.props.user.sex || null,
			company: this.props.user.company || null,
			jobTitle: this.props.user.jobTitle || null
		};
	}

	handleValidate = () => {
		const { headimgurl,
			name,
			phone,
			sex,
			company,
			jobTitle } = this.state;
		return validate(
			// VRequire(headimgurl) ? '上传作品图片' : null,
			VName(name),
			VPhone(phone),
			VRequire(company) ? '请填写公司名称' : null,
			VRequire(jobTitle) ? '请选择职位' : null,
		);
	}

	handleCreated = () => {
		const { headimgurl,
			name,
			phone,
			sex,
			company,
			jobTitle } = this.state;

		if (this.handleValidate()) {
			this.showError(this.handleValidate());
			return;
		}
		Loading.show();

		const data = {
			headimgurl,
			name,
			phone,
			openid: this.props.user.openid,
			sex,
			company,
			jobTitle
		};

		creatCooks(data).then((res) => {
			Loading.hide();
			this.props.setUser(res);
			history.push('/usercenter');
		}).catch(error => {
			Loading.hide();
			this.showError(error.message || '网络异常！请重试');
		});
	}

	showError = (message) => {
		this.setState({
			message,
			showError: true
		});
	}

	render({ path }) {
		const { headimgurl,
			name,
			phone,
			sex,
			company,
			jobTitle } = this.state;
		return (
			<div className={classNames(s.root, 'bg-orangered')}>
				<div className={classNames(s.card, 'radius-small', 'pdb2')}>
					{
						headimgurl ?
						<div className={s.face}>
							<img src={headimgurl} alt=""/>
						</div> :
						<div className={s.faceadd}>
							<span>+</span>
						</div>
					}

					<ul className={classNames(s.form, 'nls', 'clearfix', 'formBox')}>
						<li className='w2 al-r'><span className="pdr-5">姓名</span></li>
						<li className='w7'>
							<input type="text"
								value={name}
								onChange={ e => this.setState({name: e.target.value}) }
							/>
						</li>
						<li className='w2 al-r'><span className="pdr-5">手机</span></li>
						<li className='w7'>
							<input type="tel"
								maxLength="11"
								value={phone}
								onChange={ e => this.setState({phone: e.target.value}) }
							/>
						</li>
						<li className='w2 al-r'><span className="pdr-5">性别</span></li>
						<li className='w7'>
							<Select
								value={sex}
								onChange={ e => this.setState({sex: e.target.value}) }
							>
								<option value="1">男</option>
								<option value="0">女</option>
							</Select>
						</li>
						<li className='w2 al-r'><span className="pdr-5">公司</span></li>
						<li className='w7'>
							<input
								type="text"
								value={company}
								onChange={ e => this.setState({company: e.target.value}) }
							/>
						</li>
						<li className='w2 al-r'><span className="pdr-5">职位</span></li>
						<li className='w7'>
							<Select name="" id="" value={jobTitle} className={classNames(s.select, 'icon-downarrow')}
								onChange={(e) => {this.setState({jobTitle: e.target.value});}}
							>
								<option value={null}>请选择</option>
								<option value="0">水台</option>
								<option value="1">配菜</option>
								<option value="2">打荷</option>
								<option value="3">砧板</option>
								<option value="4">上杂</option>
								<option value="5">油鸡</option>
								<option value="6">尾锅</option>
								<option value="7">五锅</option>
								<option value="8">四锅</option>
								<option value="9">三锅</option>
								<option value="10">二锅</option>
								<option value="11">头锅</option>
								<option value="12">总厨</option>
								<option value="13">顾问</option>
								<option value="14">其他</option>
							</Select>
						</li>
					</ul>
					<div className="btn mgt2 w9 center" onClick={this.handleCreated}>创建名片</div>
				</div>
				<Modal
					contentLabel="Modal"
					isOpen={this.state.showError}
					onRequestClose={() => {this.setState({showError: false});}}
					shouldCloseOnOverlayClick={true}
				>
					<h3 className="al-c pdt3">{this.state.message}</h3>
				</Modal>
			</div>
		);
	}
}

function mapStateToProps(state) {
	return {
		user: state.user
	};
}

function mapDispatchToProps(dispatch) {
	return bindActionCreators({
		setUser: cookerAction.setUser
	}, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Create);
